<template>
    <h2>列表渲染</h2>
    <ul>
        <li v-for="item in NameArry">{{ item }}</li>
    </ul>
    <li>
        <ol v-for="item in Info">账号：{{item.id  }}姓名：{{ item.name }}年龄：{{ item.age }}地址：{{ item.address }}</ol>
    </li>

    <table border="1">
        <thead>
            <tr>
                <td>账号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
            </tr>
        </thead>
        <tbody v-for="item in Info">
            <tr>
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.address }}</td>
            </tr>
        </tbody>
    </table>

</template>
<script setup lang="ts">
//声明数组并初始化数据
const NameArry:string[]=['张三','李四','王五','赵六']

const Info=[
    {
        id:101,
        name:"张三",
        age:30,
        address:"北京"
    },
    {
        id:102,
        name:"李四",
        age:32,
        address:"北京"
    },
    {
        id:103,
        name:"王五",
        age:33,
        address:"北京"
    },
    {
        id:104,
        name:"赵六",
        age:34,
        address:"北京"
    },
];
</script>